<template>
  <div class="canvas-el">
    <van-checkbox v-model="allowDownload">允许保存到电脑中</van-checkbox>

    <div class="canvas-el_editor">
      <input
        id="lineStyle"
        v-model="lineStyle"
        label="颜色"
        type="color"
        name=""
      />
      <input
        id="lineWidth"
        v-model="lineWidth"
        label="线宽"
        type="range"
        name=""
        max="20"
        min="1"
      />
    </div>
    <canvas
      ref="el"
      :width="CANVAS_WIDTH"
      :height="CANVAS_HEIGHT"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
    </canvas>
    <div class="canvas-el_btns">
      <van-button type="success" @click="handleRemove">清除</van-button>
      <van-button type="success" @click="handleSave">保存</van-button>
      <van-button type="success" @click="handlePrevious">撤销</van-button>
      <van-button type="success" @click="handleNext">恢复</van-button>
    </div>

    <img v-if="reportURL" class="canvas-el_report" :src="reportURL" alt="" />

    <p>当前环境变量: ===> {{ env }}</p>
    <img width="50" src="@/mobile/images/grass.png" alt="" />
  </div>
</template>

<script lang="ts" setup name="Board">
import { onMounted } from 'vue'
import useBoard from './'
const env = computed(() => import.meta.env.VITE_ENV)
const {
  CANVAS_WIDTH,
  CANVAS_HEIGHT,
  allowDownload,
  lineWidth,
  lineStyle,
  reportURL,
  el,
  handleMouseDown,
  handleMouseMove,
  handleMouseUp,
  handleTouchStart,
  handleTouchMove,
  handleTouchEnd,
  handleRemove,
  handleSave,
  handlePrevious,
  handleNext,
  initCanvasCtx,
} = useBoard()

onMounted(() => {
  initCanvasCtx(el.value as HTMLCanvasElement)
})
</script>
